import React from 'react'
import styles from './index.module.scss'
import Tabs from '@c/Tabs'
import {getUserChannels} from '@/store/actions/home'
import { useEffect , useState} from 'react'
import { useDispatch , useSelector } from 'react-redux'
import ArticleList from './components/ArticleList'
import { SearchOutline, AppstoreOutline } from 'antd-mobile-icons'

export default function Home() {
  const dispatch = useDispatch()
  useEffect( () => {
    dispatch(getUserChannels())
  } , [dispatch])
  // 从redux获取数据
  const tabs = useSelector( (state) => state.home.userChannels)
  // 默认是tabs的第一个
  const [active,setActive] = useState(0)
  const changeActive = (index) => {
    setActive(index)
  }  
  return (
    <div className={styles.root}>
      <Tabs tabs={tabs}  onChange={changeActive}>
      {tabs.map((ch) => (
          <ArticleList
            channelId={ch.id}
            key={ch.id}
            aid={tabs[active].id}
          ></ArticleList>
        ))}
      </Tabs>
      <div className="tabs-opration">
        <SearchOutline className="icon" />
        <AppstoreOutline className="icon" />
      </div>
    </div>
  )
}
